<template>
  <transition>
  <div class="repair-order-list platform-inquiry-center">
    <section class="app-main">

      <div class="app-fixed-top">
      <div class="app-header">
        <mt-button class="btn-filter" type="danger" @click="handleFilter">筛选</mt-button>
      </div>

        <mt-navbar v-model="selected">
          <mt-tab-item id="0">
            <span class="tab-item-content">未报价
              <span class="count" v-if="resCount.inquiryWaitOfferCount!==0">
                <template v-if="resCount.inquiryWaitOfferCount<100">{{resCount.inquiryWaitOfferCount}}</template>
                <span class="count-tips" v-else>...</span>
              </span>
          </span>
          </mt-tab-item>
          <mt-tab-item id="1">
            <span class="tab-item-content">已报价
              <span class="count" v-if="resCount.inquiryFinishOfferCount!==0">
                <template v-if="resCount.inquiryFinishOfferCount<100">{{resCount.inquiryFinishOfferCount}}</template>
                <span class="count-tips" v-else>...</span>
              </span>
            </span>
          </mt-tab-item>
          <mt-tab-item id="2"><span class="tab-item-content">已支付
             <span class="count" v-if="(resCount.inquiryWaitCount+resCount.inquirySendCount+resCount.inquiryReceiveCount)!==0">
                <template v-if="(resCount.inquiryWaitCount+resCount.inquirySendCount+resCount.inquiryReceiveCount)<100">{{resCount.inquiryWaitCount+resCount.inquirySendCount+resCount.inquiryReceiveCount}}</template>
                <span class="count-tips" v-else>...</span>
              </span>
          </span>
          </mt-tab-item>
          <mt-tab-item id="5"><span class="tab-item-content">待确认
             <span class="count" v-if="resCount.inquiryWaitConfirmCount!==0">
                <template v-if="resCount.inquiryWaitConfirmCount<100">{{resCount.inquiryWaitConfirmCount}}</template>
                <span class="count-tips" v-else>...</span>
              </span>
          </span>
          </mt-tab-item>
          <mt-tab-item id="3"><span class="tab-item-content">已完成</span></mt-tab-item>
          <mt-tab-item id="4"><span class="tab-item-content">已取消</span></mt-tab-item>
        </mt-navbar>
      </div>
      <!-- tab-container -->
      <div class="tab-body xunjia-list">
        <ul class="tab-list"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10">
          <li class="item" v-for="item in enquiryList">
            <div class="item-header">
              {{item.applyCustomName}}<template v-if="!item.applyCustomName">{{item.applyCustomTypeName}}</template>
              <div class="item-sn">{{item.sn}}</div>
              <span class="item-state">
                <template>{{item.inquiryStatusDesc}}</template>
              </span>
            </div>
            <dl class="item-body" @click="handleDetails(item.id)">
              <dd><span class="item-addon">报单时间：</span>{{item.createDateStr}}</dd>
              <dd><span class="item-addon">报&nbsp;单&nbsp;员：</span></dd>
              <dd><span class="item-addon">车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：</span><span class="item-content">{{item.carModel}}</span></dd>
              <dd>
                <span class="item-addon">维修部位：</span>
                <ul class="item-content">
                  <li class="position-item" v-for="position in item.parts">
                    {{position.remark}}({{position.brand}})
                  </li>
                </ul>
              </dd>
            </dl>
            <div class="item-footer">
              <mt-button type="danger" @click="handleDetails(item.id)">工单详情</mt-button>
            </div>
          </li>
        </ul>
        <div class="line-scale-pulse-out" v-show="loading">
          <div class="loader-item"></div>
          <div class="loader-item"></div>
          <div class="loader-item"></div>
          <div class="loader-item"></div>
          <div class="loader-item"></div>
        </div>
        <div class="module-none" v-if="showNone">
          暂无工单信息！
        </div>
        <!--<div class="load-finish-tips" v-if="loadTips">-->
        <!--已加载完成-->
        <!--</div>-->
      </div>
    </section>


    <!--弹窗-列表筛选-->
    <mt-popup
      v-model="popupFilterShow"
      position="right" class="filter-popup">
      <ul class="filter-list">
        <li class="filter-item">
          <span class="addon">条件搜索</span>
        </li>
        <li class="filter-item filter-item-spe">
          <mt-field label="客户名称" placeholder="" v-model="search.applyCustomName"></mt-field>
        </li>
        <li class="filter-item filter-item-spe">
          <mt-field label="工单号/内部单号" placeholder="" v-model="search.sn"></mt-field>
        </li>
        <li class="filter-item filter-item-spe">
          <mt-field label="车牌号/自编号" placeholder="" v-model="search.carNo"></mt-field>
        </li>
        <li class="filter-item filter-item-spe">
          <mt-field label="服务内容" placeholder="" v-model="search.remark"></mt-field>
        </li>
      </ul>
      <div class="button-content">
        <div class="button-block-6">
          <mt-button type="default" @click="popupFilterShow=false">取消</mt-button>
        </div>
        <div class="button-block-6">
          <mt-button type="danger" @click="handleSure">确认</mt-button>
        </div>
      </div>
    </mt-popup>
    <!--弹窗-列表筛选-->
  </div>
    </transition>
</template>

<script>
  import { Navbar, TabItem,TabContainer, TabContainerItem,Button,Radio,Toast,Indicator} from 'mint-ui';

//  Vue.component(Header.name, Header);
export default {
  data () {
    return {
      selected:'',
      res:'',
      resCount:'',
      timeSelectStr:'',
      showNone:false,
      loading:false,
      loadTips:false,
      page:1,
      pageSize:10,
      orderByField:'',
      enquiryList:[],
      demandSource:1,
      popupFilterShow:false,
      search:{
        applyCustomName:'',
        allotUserName:'',
        carNo:'',
        remark:'',
        sn:'',
      },
    }
  },
  /**进入路由前判断**/
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if(from.query.stateId!==undefined){
      vm.selected=from.query.stateId;
    }else{
      vm.selected='0';
    }
  })
  },
  watch:{
    'selected'(val){
      this.page=1;
      Indicator.open({
        text: '加载中...',
        spinnerType: 'snake'
      });
      this.getCountFlag();
      //    获取接单列表
      var params = new URLSearchParams();
      params.append('countFlag',0);
      params.append('demandType',2);
//      params.append('demandSource',this.demandSource);
      params.append('applyCustomName',this.search.applyCustomName);
      params.append('carNo',this.search.carNo);
      params.append('allotUserName',this.search.allotUserName);
      params.append('sn',this.search.sn);
      params.append('remark',this.search.remark);
      if(val=='0'){
        this.orderByField='modifyDate'
      }
      if(val=='1'){
        this.orderByField='allotDate'
        params.append('dateProp','allotDate');
      }
      if(val=='2'){
        this.orderByField='receiveDate'
//        params.append('controllerCenterStatus',2);
      }
      if(val=='4'){
        this.orderByField='finishDate'
      }
      if(val=='6'){
        this.orderByField='cancelDate'
      }
      if(val=='7'){
        this.orderByField='cancelApplyDate'
//        params.append('controllerCenterStatus',7);
      }
      params.append('inquiryStatusMult',val);
      params.append('currPage',this.page);
      params.append('pageSize',this.pageSize);
      params.append('orderByField',this.orderByField);
      this.$axios({
        method: 'post',
        url:'gp/declaration/listServiceDispatch',
        data:params
      }).then((res)=>{
        if(res.data.statusCode==200){
        Indicator.close();
        this.res = res.data.object;
        this.enquiryList = res.data.object.demands
        this.total=res.data.object.totalCount;
        if(this.enquiryList.length<=0){
          this.showNone=true;
        }else{
          this.showNone=false;
        }
      }else{
        Toast({
          message: res.data.message,
          position: 'middle',
          duration:800
        });
        Indicator.close();
      }
    });
    },
  },
  created(){

    this.getCountFlag();
    if(this.$route.query.stateId){
      this.selected=this.$route.query.stateId;
    };
    console.log(1111111)
    /** 获取接单列表 **/
  },
  methods:{
    loadMore() {
      if(this.total==0){
        return false;
      }
      if(this.enquiryList.length<this.total){
        this.loading = true;
        this.page++;
        var params = new URLSearchParams();
        params.append('countFlag',0);
        params.append('demandType',2);
//        params.append('demandSource',this.demandSource);
        params.append('applyCustomName',this.search.applyCustomName);
        params.append('allotUserName',this.search.allotUserName);
        params.append('carNo',this.search.carNo);
        params.append('sn',this.search.sn);
        params.append('remark',this.search.remark);

        if(this.selected=='0'){
          this.orderByField='modifyDate'
        }
        if(this.selected=='1'){
          params.append('dateProp','allotDate');
          this.orderByField='allotDate'
        }
        if(this.selected=='2'){
          this.orderByField='receiveDate'
//          params.append('controllerCenterStatus',2);
        }
        if(this.selected=='4'){
          this.orderByField='finishDate'
        }
        if(this.selected=='6'){
          this.orderByField='cancelDate'
        }
        if(this.selected=='7'){
//          params.append('controllerCenterStatus',7);
        }
        params.append('inquiryStatusMult',this.selected);
        params.append('currPage',this.page);
        params.append('pageSize',this.pageSize);
        params.append('orderByField',this.orderByField);
        this.$axios({
          method: 'post',
          url:'gp/declaration/listServiceDispatch',
          data:params
        }).then((res)=> {
          for(var i=0;i<res.data.object.demands.length;i++){
          this.enquiryList.push(res.data.object.demands[i]);
        }
      });
        setTimeout(() => {
          this.loading = false;
      },1000);
      }else{
        this.loadTips=true;
      }

    },
    handleDetails(id){
      if(this.selected==0 || this.selected==1){
        this.$router.push({path:'/platform-inquiry-details',query: {id:id,stateId:this.selected}})
      }else{
        this.$router.push({path:'/platform-report-details',query: {id:id,stateId:this.selected}})
      }
    },
    handleFilter(){
      this.popupFilterShow=true
    },
    getCountFlag(){
      this.page=1;
      var params = new URLSearchParams();
      params.append('countFlag',1);
      params.append('demandType',2);
//      params.append('demandSource',this.demandSource);
      params.append('applyCustomName',this.search.applyCustomName);
      params.append('carNo',this.search.carNo);
      params.append('sn',this.search.sn);
      params.append('allotUserName',this.search.allotUserName);
      params.append('remark',this.search.remark);
      if(this.selected=='1'){
        params.append('dateProp','allotDate');
      }
      params.append('currPage',this.page);
      params.append('pageSize',this.pageSize);
      this.$axios({
        method: 'post',
        url:'gp/declaration/listServiceDispatch',
        data:params
      }).then((res)=>{
        if(res.data.statusCode==200){

        this.resCount = res.data.object;

      }else{
        Toast({
          message:res.data.message,
          position: 'middle',
          duration:800
        });
      }

    });
    },
    handleSure(){

      this.getCountFlag();
      this.page=1;
      var params = new URLSearchParams();
      params.append('countFlag',0);
      params.append('demandType',2);
//      params.append('demandSource',this.demandSource);
      params.append('applyCustomName',this.search.applyCustomName);
      params.append('carNo',this.search.carNo);
      params.append('sn',this.search.sn);
      params.append('allotUserName',this.search.allotUserName);
      params.append('remark',this.search.remark);

      params.append('inquiryStatusMult',this.selected);
      if(this.selected=='0'){
        this.orderByField='modifyDate'
      }
      if(this.selected=='1'){
        this.orderByField='allotDate';
        params.append('dateProp','allotDate');
      }
      if(this.selected=='2'){
        this.orderByField='receiveDate'
//        params.append('controllerCenterStatus',2);
      }
      if(this.selected=='4'){
        this.orderByField='finishDate'
      }
      if(this.selected=='6'){
        this.orderByField='cancelDate'
      }
      if(this.selected=='7'){
//        params.append('controllerCenterStatus',7);
      }
      params.append('currPage',this.page);
      params.append('pageSize',this.pageSize);
      this.$axios({
        method: 'post',
        url:'gp/declaration/listServiceDispatch',
        data:params
      }).then((res)=>{
        console.log(res)
      Toast({
        message: '筛选成功',
        position: 'middle',
        duration:800
      });
      this.popupFilterShow=false;
      this.res=res.data.object;
      this.enquiryList=res.data.object.demands;
      this.total=res.data.object.totalCount;
    });
    }
  }
}
</script>
<style src="../../../static/app-repair.css"></style>

<style>
  .platform-inquiry-center .app-main{
    padding:94px 0 0;
  }
  .platform-inquiry-center .mint-navbar .mint-tab-item{
    width:20% !important;
    min-width:20%;
    max-width:20%;
  }
</style>
